import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const MultiBarChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'MultiBarChart',
  title: '多系列柱状图',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '消防安全',
  category: '图表',
  priority: 0,
  npm: {
    package: 'hzdz-charts',
    version: '1.0.0',
    exportName: 'MultiBarChart',
    destructuring: true,
  },
  configure: {
    props: [
      // 基础配置
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础配置',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '图表宽度，支持数字或字符串'
            },
            setter: {
              componentName: 'MixedSetter',
              props: {
                setters: [
                  'StringSetter',
                  'NumberSetter'
                ]
              }
            }
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '图表高度，支持数字或字符串'
            },
            setter: {
              componentName: 'MixedSetter',
              props: {
                setters: [
                  'StringSetter',
                  'NumberSetter'
                ]
              }
            }
          },
          {
            name: 'title',
            title: {
              label: '图表标题',
              tip: '图表的标题文字'
            },
            setter: 'StringSetter'
          },
          {
            name: 'chartType',
            title: {
              label: '柱状图类型',
              tip: '选择并列柱状图或堆叠柱状图'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '并列柱状图', value: 'grouped' },
                  { label: '堆叠柱状图', value: 'stacked' }
                ]
              }
            }
          },
          {
            name: 'barWidth',
            title: {
              label: '柱体宽度',
              tip: '柱体宽度比例，0-1之间'
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 1,
                step: 0.1
              }
            }
          },
          {
            name: 'colors',
            title: {
              label: '颜色配置',
              tip: '柱子的颜色配置'
            },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ColorSetter',
                  initialValue: '#5AF3B8'
                }
              }
            }
          }
        ]
      },
      // 数据配置
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据配置',
        },
        items: [
          {
            name: 'xAxisData',
            title: {
              label: 'X轴字段',
              tip: 'X轴的类别数据'
            },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: 'StringSetter'
              }
            }
          },
          {
            name: 'yAxisData',
            title: {
              label: 'Y轴数据',
              tip: 'Y轴的数值数据系列'
            },
            setter: 'JsonSetter'
          }
        ]
      },
      // X轴配置
      {
        name: 'xAxis',
        type: 'group',
        display: 'accordion',
        title: {
          label: 'X轴配置',
        },
        items: [
          {
            name: 'xAxisLabelRotation',
            title: {
              label: '标签旋转',
              tip: 'X轴标签的旋转角度，-90到90度'
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: -90,
                max: 90,
                step: 1
              }
            }
          },
          {
            name: 'xAxisInterval',
            title: {
              label: '显示间隔',
              tip: 'X轴标签的显示间隔'
            },
            setter: 'NumberSetter'
          }
        ]
      },
      // Y轴配置
      {
        name: 'yAxis',
        type: 'group',
        display: 'accordion',
        title: {
          label: 'Y轴配置',
        },
        items: [
          {
            name: 'yAxisUnit',
            title: {
              label: '单位文本',
              tip: 'Y轴的单位文字'
            },
            setter: 'StringSetter'
          },
          {
            name: 'yAxisInterval',
            title: {
              label: '刻度间隔',
              tip: 'Y轴刻度的间隔值'
            },
            setter: 'NumberSetter'
          }
        ]
      },
      // 图例配置
      {
        name: 'legend',
        type: 'group',
        display: 'accordion',
        title: {
          label: '图例配置',
        },
        items: [
          {
            name: 'showLegend',
            title: {
              label: '显示图例',
              tip: '是否显示图例'
            },
            setter: 'BoolSetter'
          },
          {
            name: 'legendPosition',
            title: {
              label: '图例位置',
              tip: '图例的位置'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '顶部', value: 'top' },
                  { label: '底部', value: 'bottom' },
                  { label: '左侧', value: 'left' },
                  { label: '右侧', value: 'right' }
                ]
              }
            }
          },
          {
            name: 'legendColor',
            title: {
              label: '图例颜色',
              tip: '图例文字的颜色'
            },
            setter: 'ColorSetter'
          }
        ]
      },
      // 标签配置
      {
        name: 'labels',
        type: 'group',
        display: 'accordion',
        title: {
          label: '标签配置',
        },
        items: [
          {
            name: 'showValues',
            title: {
              label: '显示数值',
              tip: '是否在柱子上显示数值'
            },
            setter: 'BoolSetter'
          },
          {
            name: 'labelPosition',
            title: {
              label: '标签位置',
              tip: '数值标签的位置'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '顶部', value: 'top' },
                  { label: '内部', value: 'inside' },
                  { label: '中心', value: 'center' }
                ]
              }
            }
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onClick',
          template: "onClick(${extParams})"
        }
      ]
    },
    component: {}
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '多系列柱状图',
    screenshot: '',
    schema: {
      componentName: 'MultiBarChart',
      props: {
        title: '小时运力图',
        width: 400,
        height: 300,
        chartType: 'grouped',
        barWidth: 0.8,
        colors: ['#5AF3B8', '#FF6B6B'],
        xAxisData: ['供配电', '给排水', '消防', '暖通'],
        yAxisData: [
          [
            { name: '正常', value: 48, category: '正常' },
            { name: '正常', value: 20, category: '正常' },
            { name: '正常', value: 15, category: '正常' },
            { name: '正常', value: 48, category: '正常' }
          ],
          [
            { name: '告警', value: 8, category: '告警' },
            { name: '告警', value: 1, category: '告警' },
            { name: '告警', value: 1, category: '告警' },
            { name: '告警', value: 12, category: '告警' }
          ]
        ],
        xAxisLabelRotation: 0,
        xAxisInterval: 1,
        yAxisUnit: '(个)',
        yAxisInterval: 10,
        showLegend: true,
        legendPosition: 'top',
        legendColor: '#FFFFFF',
        showValues: true,
        labelPosition: 'top'
      }
    }
  }
];

export default MultiBarChartMeta;
export { snippets }; 